<template>
  <div>
    <div class="prevanfield">
      <van-field
        :value="activeText"
        readonly
        :border="false"
        placeholder="请选择下钻条件"
        class="firstLapping"
        :class="activeText && 'selected'"
      />
    </div>
    <div class="drilldown">
      <van-tree-select
        :items="pupValue"
        :main-active-index="mainActiveIndex"
        :active-id="activeId"
        @click-nav="onClickNav"
        @click-item="onClickItem"
      />
      <div class="labelDrillDown">
        <van-button plain type="default" @click="handleCancel" class="DrillDownButton">取消</van-button>
        <van-button
          plain
          type="info"
          @click="handleDetermine"
          class="DrillDownButton"
          :disabled="activeId ? false : true"
        >
          确定
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    curData: {
      type: Object,
      default: () => {}
    },
    pupValue: {
      type: Array,
      default: () => []
    },
    buttonType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mainActiveIndex: 0,
      activeId: '', // 选中id
      activeText: '' // 选中文字
    }
  },
  methods: {
    // 选中左侧维度
    onClickNav(detail) {
      this.mainActiveIndex = detail
    },
    // 选择右侧子维度
    onClickItem(detail) {
      /** 判断是否存在，已存在清空,未存在赋值*/
      this.activeId = this.activeId === detail.id ? '' : detail.id
      this.activeText = this.activeText === detail.text ? '' : detail.text
    },
    onClose() {},
    // 点击确认按钮
    handleDetermine() {
      const drillFileds = [{ name: this.activeText, code: this.activeId }]
      this.$emit('drilldownDetermine', false, drillFileds)
      this.activeId = '' // 选中id清空
      this.activeText = '' // 选中文字清空
      this.mainActiveIndex = 0 // 回到默认第一个选项
    },
    // 点击取消按钮
    handleCancel() {
      this.activeId = null
      this.activeText = null
      this.mainActiveIndex = 0
      this.$emit('closepup', false)
    }
  },
  watch: {
    curData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        console.log(this.buttonType === 'modifyButton' && newVal.operation === 'drill')
        if (this.buttonType === 'modifyButton' && newVal.operation === 'drill') {
          const activeIdTemp = newVal.detailContent.fields.filter(m => m.role === 'dim').map(m => m.refCode)[0]
          const activeTextTemp = newVal.detailContent.fields.filter(m => m.role === 'dim').map(m => m.name)[0]
          this.activeId = activeIdTemp
          this.activeText = activeTextTemp
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.prevanfield {
  display: flex;
  justify-content: center;
  padding-bottom: 14px;
}
.firstLapping {
  height: 40px;
  width: 335px;
  border-radius: 2px;
  background-color: transparent;
  border: 1px solid $light-grey;
  &.selected {
    border: 1px solid #fff;
  }
}
/deep/.van-sidebar-item {
  background-color: transparent;
}
/deep/.van-field__control {
  color: #fff;
}
.drilldown {
  /deep/.van-tree-select {
    height: 30vh !important;
    // padding: 0px 10px;
  }
  /deep/.van-tree-select__nav-item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__content {
    background: $dark-grey;
  }
  /deep/.van-tree-select__nav {
    background: $light-bc;
  }
  /deep/.van-sidebar-item--select,
  .van-sidebar-item--select:active {
    background-color: $dark-grey;
    color: #fff;
  }
  /deep/.van-tree-select__item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__item--active {
    color: rgba(255, 255, 255, 1);
  }
  .labelDrillDown {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 13px 20px;
  }
  .DrillDownButton {
    color: #fff;
    width: 160px;
    height: 48px;
    font-size: 16px;
  }
}
</style>
